<template>
  <div class="echarts">
    <ECharts :option="option" />
  </div>
</template>

<script setup lang="ts" name="BarEcharts">
// import { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import { onMounted, reactive, watch } from "vue";

const props = defineProps({
  data: {
    type: Array,
    required: false,
    default: () => []
  },
  colorList: {
    type: Array,
    required: false,
    default: () => []
  }
});

watch(
  () => props.data,
  () => {
    setOption();
  }
);

const option: any = reactive({
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  // grid: {
  //   left: "13%",
  //   right: "4%",
  //   // top: "-10%",
  //   containLabel: true
  // },
  legend: {
    orient: "vertical", // 设置图例竖直排列
    right: "10%", // 图例距离容器右侧的距离为10像素
    top: "18%", // 图例距离容器顶部的距离为10像素
    // bottom: "30%", // 图例距离容器底部的距离为10像素
    // icon: "rect",
    // itemWidth: 26, // 设置图例图标的宽度
    // itemHeight: 16, // 设置图例图标的高度
    itemGap: 25 // 设置图例项之间的间距
  },
  series: [
    {
      name: "告警数",
      type: "pie",
      radius: ["55%", "70%"],
      center: ["30%", "50%"],
      avoidLabelOverlap: false,
      // padAngle: 2,
      // itemStyle: {
      //   borderRadius: 0
      // },
      label: {
        show: true,
        position: "center",
        fontSize: 30,
        // fontWeight: 600,
        formatter: () => {
          return "无数据";
        }
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     fontSize: 40,
      //     fontWeight: "bold"
      //   }
      // },
      labelLine: {
        show: true
      },
      data: []
    }
  ]
});

const setOption = () => {
  const data = props.data || [];
  option.series[0].data = data;
  option.series[0].label.formatter = () => {
    const total = data.reduce((a, b: any) => a + b.value, 0);
    return data.length ? total : "无数据";
  };
  if (props.colorList && props.colorList.length) {
    option.color = props.colorList;
  }
};

onMounted(() => {
  setOption();
});
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
}
</style>
